<template>
	<div class="app-container1" style="padding: 12px;background: #fff;">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center">
				<div class="flex-start-center-wrap">
					<!--<el-radio-group v-model="searchParams.productState" size="small" class="item-gap" @change="onStateChange">
						<el-radio-button v-for="item in productionStateList" :key="item.id" :label="item.id">
							<el-badge v-if="item.id <= 1 && item.count > 0" :value="item.count" :max="99" class="flex-start-center">
								<jk-state-bar :state="item.id" :state-list="productionStateList" :show-text="false"></jk-state-bar>
								<span class="margin-right-20">{{ item.name }}</span>
							</el-badge>
							<div v-else class="flex-start-center">
								<jk-state-bar :state="item.id" :state-list="productionStateList" :show-text="false"></jk-state-bar>
								<div class="margin-right-10" style="padding-bottom: 2px;">{{ item.name }}</div>
							</div>
						</el-radio-button>
					</el-radio-group>-->
				</div>
				<div class="flex-end-center-wrap">
					<!--<jk-search-input v-model="searchParams.customerName" placeholder="客户名称" size="small" class="search-bar-item-size3 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />-->
					<jk-date-picker v-model="searchParams.belongDate" :disabled-future-time="true" placeholder="日期" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable />
					<jk-search-input v-model="searchParams.productName" placeholder="品种名称" size="small" class="search-bar-item-size3 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-input v-model="searchParams.batchCode" placeholder="批号" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-input v-model="searchParams.code" placeholder="生产订单号" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-button class="" @click="onSearchBtn"></jk-search-button>
					<!--<jk-full-screen-button size="small" @status="onFullScreenChange"></jk-full-screen-button>-->
				</div>
			</div>
		</jk-operation-card>

		<jk-card>
			<div @mouseover="onMouseOver" @mouseleave="onMouseLeave">
				<jk-table ref="tableBox" border :row-style="rowClassName" :cell-style="rowClassName" :stripe="false" :loading="tableLoading" :data="tableData" :height="isFull ? tableHeight + 110 : tableHeight + 14" @scroll="onScroll">
					<vxe-column
						v-for="(item, index) in tableColumnList"
						:key="index"
						:title="item.title"
						:align="item.align"
						:field="item.keyName"
						:sortable="item.sortable"
						:fixed="item.fixed ? item.fixed : ''"
						:min-width="item.minWidth"
						:width="item.width"
					>
						<template v-if="['productOrderBatchList'].includes(item.keyName)" slot="header">
							<el-row :gutter="4">
								<el-col :span="9">批号</el-col>
								<el-col :span="5">纸管颜色</el-col>
								<el-col :span="5">腰绳颜色</el-col>
								<el-col :span="5">标签颜色</el-col>
							</el-row>
						</template>
						<template slot-scope="scope">
							<span v-if="item.keyName === 'code'">{{ scope.row.code }}</span>
							<jk-state-bar v-else-if="item.keyName === 'priorityName'" :state="scope.row.priorityId" :state-list="priorityList"></jk-state-bar>
							<span v-else-if="item.keyName === 'machineNum'">{{ scope.row.productOrderMachineList ? scope.row.productOrderMachineList.length : 0 }}</span>
							<span v-else-if="item.keyName === 'openMachineCount'" class="link-style" @click="onDetailBtn(scope)">{{ scope.row.openMachineCount || 0 }}</span>
							<div v-else-if="item.keyName === 'productionPercentage'" class="flex-center">
								<jk-progress :show-text="false" :show-custom-text="true" :custom-text-style="{}" :stroke-width="6" type="circle" color="#19be6b" :width="40" :percentage="scope.row.productionPercentage || 0"></jk-progress>
							</div>
							<div v-else-if="item.keyName === 'productOrderBatchList'">
								<el-row
									v-for="(batchItem, batchIndex) in scope.row.productOrderBatchList"
									:key="batchIndex"
									:gutter="4"
								>
									<el-col :span="9"><span>{{ batchItem.batchCode || '无' }}</span></el-col>
									<el-col :span="5"><span>{{ filterColor(batchItem.paperTubeList) }}</span></el-col>
									<el-col :span="5"><span>{{ filterColor(batchItem.waistPopeList) }}</span></el-col>
									<el-col :span="5"><span>{{ filterColor(batchItem.labelColorList) }}</span></el-col>
								</el-row>
							</div>
							<!--<div v-else-if="item.keyName === 'processList'" style="cursor: pointer;" @click="onDetailBtn(scope)">
								<processSteps
									:process-list="scope.row.processList"
								></processSteps>
							</div>-->
							<span v-else>{{ scope.row[item.keyName] }}</span>
						</template>
					</vxe-column>
				</jk-table>
			</div>
			<!-- 分页组件 -->
			<footer ref="box2" class="flex-end-center margin-top-10">
				<!--<total-detail-popover :form-data="totalData"></total-detail-popover>-->
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="totalCount"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
		<detail-dialog
			ref="openDetailDialog"
			:data-item="dataItem"
			:dialog-state="detailDialogState"
			@on-visible-change="onVisibleChangeOfDetailDialog"
		></detail-dialog>
		<daily-yield-dialog
			:data-item="dataItem"
			:dialog-state="dailyYieldDialogState"
			@on-visible-change="onVisibleChangeOfDailyYieldDialog"
		></daily-yield-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '../../../mixins/getMenuColumn';
    import handlerCache from '../../../mixins/handler-cache';
    import { orderPriorityList, orderStateList, productionStateList } from '../../../utils/jk/status-option-list';
    import permissionMixin from '../../../mixins/permission-mixin';
    import { productionPrdOrderSum, productionProductOrderTrackingRecordPage } from '../../../api/production/productionMonitor';
    import detailDialog from './detail-dialog';
    import jkProgress from '../../jk-components/jk-progress/index';
    import totalDetailPopover from './total-detail-popover';
    import domResize from '../../../mixins/dom-resize';
    import processSteps from './components/processSteps';
    import dailyYieldDialog from './components/dailyYield/daily-yield-dialog';
    export default {
        name: 'OrderMonitorReport',
        components: {
            dailyYieldDialog,
            processSteps,
            totalDetailPopover,
            jkProgress,
            detailDialog
        },
        mixins: [domResize, calHeight, getMenuColumn, handlerCache, permissionMixin],
        data() {
            return {
                apiItem: {
                    'page': productionProductOrderTrackingRecordPage
                },
                activeVal: 2,
                totalData: {},
                dailyYieldDialogState: false,
                detailDialogState: false,
                productionStateList: productionStateList,
                orderStateList: orderStateList,
                dataItem: {},
                tableLoading: true,
                exportLoading: false,
                tableData: [],
                totalCount: 0,
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    selectOpen: true,
                    code: '',
                    ifTest: false,
                    batchCode: '',
                    belongDate: '',
                    machineNameOrCode: '',
                    customerName: '',
                    productName: '',
                    productState: 1
                },
                selectItem: {},
                priorityList: orderPriorityList,
                interVal: {},
                isFull: false,
                scrollViewHeight: 0,
                topHeight: 0,
                lastScrollTop: 0,
                scrollTime: {}
            };
        },
        mounted() {
            this.getDependentData();
        },
        methods: {
            filterColor(list) {
                const arr = list.filter(x => x.auditState);
                const str = arr.map(x => x.name).join(',');
                return str;
            },
            onStateChange() {
                this.topHeight = 0;
                this.tableData = [];
                this.searchParams.pageNo = 1;
                this.getListRequest();
            },
            onDailyYieldBtn(scope) {
                this.dataItem = scope.row;
                this.dailyYieldDialogState = true;
            },
            onVisibleChangeOfDailyYieldDialog(e) {
                this.dailyYieldDialogState = e;
            },
            onFullScreenChange(e) {
                this.isFull = e;
            },
            rowClassName(e) {
                const styleCfg = {};
                if (e.row.ifOpen) {
                    /* styleCfg = {
                        boxShadow: 'inset 0 0 0px 0.5px #5cadff',
                        color: '#fff',
                        background: '#1890ff'
                    };*/
                    return styleCfg;
                }
            },
            clearRadioRowEvent() {
                this.selectItem = {};
                this.$refs.tableBox.$refs.xTable.clearRadioRow();
            },
            onDetailBtn(scope) {
                this.dataItem = scope.row;
                this.detailDialogState = true;
            },
            onVisibleChangeOfDetailDialog(e) {
                if (!e) {
                    this.dataItem = {};
                }
                this.detailDialogState = e;
            },
            onSearchBtn() {
                this.tableLoading = true;
                this.totalCount = 0;
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onPageChange(e, size) {
                this.$set(this.searchParams, 'pageNo', e);
                this.$set(this.searchParams, 'pageSize', size);
                this.getListRequest();
            },
            onFinish() {
                this.getListRequest();
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            async getDependentData() {
                this.tableLoading = true;
                await this.getMenuColumnListRequest();
                await this.getListRequest();
                this.tableLoading = false;
            },
            getTotalDataRequest() {
                const params = JSON.parse(JSON.stringify(this.searchParams));
                delete params.pageNo;
                delete params.pageSize;
                return productionPrdOrderSum(params).then(res => {
                    if (res.data.status === 200) {
                        this.totalData = res.data.res || {};
                    }
                });
            },
            getStateBarCountRequest() {
                /* return reportProductionOrderTrackingCount().then(res => {
                    if (res.data.status === 200) {
                        this.productionStateList = this.productionStateList.map(x => {
                            x.count = 0;
                            res.data.res.forEach(k => {
                                if (x.id === k.productState) {
                                    x.count = k.count;
                                }
                            });
                            return x;
                        });
                        this.$nextTick(() => {
                            this.calTableHeight();
                        });
                    } else {
                        this.productionStateList = this.productionStateList.map(x => {
                            x.count = 0;
                            return x;
                        });
                    }
                });*/
            },
            /** 查询列表 */
            getListRequest() {
                // this.getTotalDataRequest();
                this.selectItem = {};
                const params = { ...this.searchParams };
                return this.apiItem['page'](params).then(res => {
                    this.tableLoading = false;
                    this.getStateBarCountRequest();
                    if (res.data.status === 200) {
                        this.tableData = res.data.res ? res.data.res.map(x => {
                            return x;
                        }) : [];
                        this.totalCount = res.data.count;
                    }
                });
            },
            runData() {
                clearInterval(this.interVal);
                this.interVal = setInterval(() => {
                    this.getListRequest();
                }, 1000 * 10);
            },
            onScroll(e) {
                // 计算可滚动的高度
                this.scrollViewHeight = e.scrollHeight - e.bodyHeight;
                this.lastScrollTop = e.scrollTop;
            },
            runScroll() {
                clearInterval(this.scrollTime);
                this.scrollTime = setInterval(() => {
                    this.$refs.tableBox.$refs.xTable.scrollTo(0, this.topHeight++);
                    if (this.topHeight > this.scrollViewHeight && this.scrollViewHeight) {
                        this.topHeight = 0;
                    }
                }, 40);
            },
            onMouseOver() {
                clearInterval(this.scrollTime);
            },
            onMouseLeave() {
                this.topHeight = this.lastScrollTop;
                // this.runScroll();
            }
        },
        beforeRouteEnter(to, from, next) {
            next((_this) => {
                // 针对keepAlive等于true时,如果详情弹窗是打开状态，开启它的定时器
                if (_this.$refs.openDetailDialog.showDialog) {
                    _this.$refs.openDetailDialog.run();
                }
                // _this.runScroll();
                _this.runData();
            });
        },
        beforeRouteLeave(to, from, next) {
            // 清除弹窗定时器
            this.$refs.openDetailDialog.clearTimer();
            clearInterval(this.interVal);
            clearInterval(this.scrollTime);
            next();
        }
    };
</script>
